import React, {Component} from 'react'
import { Form, Input, Button, Select, Upload, Icon, Radio, Table, Row, Col } from 'antd'

const { Option } = Select;
class AddProduct extends Component{
  state = {
    imageUrl: ''
  }
  constructor (props) {
    super(props)
    this.editor = React.createRef()
  }
  render(){
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
    };
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">点击上传</div>
      </div>
    );
    const fileList = [
      {
        uid: '-1',
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-2',
        name: 'yyy.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
    ];
    const props = {
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      listType: 'picture',
      defaultFileList: [...fileList],
    };
    const data = [
      {
        key: 1,
        name: '颜色',
        size: '白色',
        price: 20,
        lock: 234,
      },
      {
        key: 1,
        name: '颜色',
        size: '黑色',
        price: 20,
        lock: 234,
      }
    ]
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '规格',
        dataIndex: 'size',
        key: 'size',
      },
      {
        title: '价格',
        dataIndex: 'price',
        key: 'price',
      },{
        title: '库存',
        dataIndex: 'lock',
        key: 'lock',
      },{
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: () => <Button>删除</Button>
      }
    ]
    return (
      <div classs="add_product">
        <Form {...formItemLayout}>
          <Form.Item label="商品名称">
            <Input placeholder="请输入商品名称" />
          </Form.Item>
          <Form.Item label="商品类别">
            <Select>
              <Option value="jack">Jack</Option>
            </Select>
          </Form.Item>
          <Form.Item label="商品主图">
            <Upload name="avatar" listType="picture-card" className="avatar-uploader"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            >
            {this.state.imageUrl ? <img src={this.state.imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
            </Upload>
          </Form.Item>
          <Form.Item label="商品详情图">
            <Upload {...props}>
              <Button>
                <Icon type="upload" /> Upload
              </Button>
            </Upload>
          </Form.Item>
          <Form.Item label="商品进价">
            <Input placeholder="请输入商品进价" />
          </Form.Item>
          <Form.Item label="商品售价">
            <Input placeholder="请输入商品售价" />
          </Form.Item>
          <Form.Item label="商品活动价">
            <Input placeholder="请输入商品活动价" />
          </Form.Item>
          <Form.Item label="商品库存">
            <Input placeholder="请输入商品库存" />
          </Form.Item>
          <Form.Item label="商品规格">
            <Radio.Group value={2}>
              <Radio value={1}>有规格</Radio>
              <Radio value={2}>无规格</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="规格详情">
            <Input placeholder="请输入规格名称"/>
            <Input placeholder="请输入规格"/>
            <Table bordered columns={columns} dataSource={data} size="small" pagination={false}></Table>
          </Form.Item>
          <Form.Item label="商品信息">
            <Row gutter={16}>
              <Col span={8}><Input placeholder="例如：品牌" /></Col>
              <Col span={12}><Input placeholder="HUAWEI" /></Col>
              <Col><Button type="primary" shape="circle" icon="plus"></Button></Col>
            </Row>
          </Form.Item>
          <Form.Item label="商品详情">
            <Upload {...props}>
              <Button>
                <Icon type="upload" /> Upload
              </Button>
            </Upload>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
export default Form.create()(AddProduct)